<template>
  <div >
    <el-row class="bgW">
      <el-col :span="22">
        <!--检索条件-->
        <el-form class="search" :inline="true" label-suffix="：" size="mini" :model="search">
           <el-form-item label="优惠券类型">
            <el-select v-model="search.type" placeholder="请选优惠券类型" class="w180" clearable>
              <el-option
                v-for="item in options.type"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList('search')">搜索</el-button>
      </el-col>
    </el-row>
    <!--列表-->
        <!-- <el-col :span="24">
          <el-table
            :data="list"
            size="small"
            border
            :cell-style="$style.cellStyle"
            :header-cell-style="$style.rowClass"
          >
            <ElTableColumn label="优惠券名称" prop="name" />
            <ElTableColumn label="面值(元)" prop="denomination"  width="150"/>
            <ElTableColumn label="优惠券类型" prop="type">
              <template slot-scope="{ row }">
                <span v-if="row.type == 1">满减券</span>
                <span v-if="row.type == 3">满赠券</span>
                <span v-if="row.type == 4">兑换券</span>
              </template>
            </ElTableColumn>
           <ElTableColumn label="优惠券状态" >
              <template slot-scope="{ row }">
                <span v-if="row.staus == 0">未使用</span>
                <span v-if="row.staus == 1">已使用</span>
                <span v-if="row.staus == 2">已过期</span>
                <span v-if="row.staus == 3">未开始</span>
              </template>
            </ElTableColumn>
            <ElTableColumn label="有效期" width="280" >
              <template slot-scope="{ row }">
                <div >{{ row.start_time }} 至 {{ row.end_time }}</div>
              </template>
            </ElTableColumn>
            <ElTableColumn label="领取时间" prop="create_time" />
            <ElTableColumn label="使用时间" prop="use_time" />
            <ElTableColumn label="使用门槛(元)"  prop="use_threshold" />
            <ElTableColumn label="操作" fixed="right">
              <template slot-scope="{ row }">
                <span v-if="row.type == 4 && row.staus == 0" class="theme" @click="tapBtn(row)">兑 换</span>
              </template>
            </ElTableColumn>
          </el-table>
        </el-col> -->
      <div class="accountCon" v-loading="clientLoading"  element-loading-text="拼命加载中">
      <div v-if="list.length !== 0"   >
        <div  style="display: grid; grid-template-columns: repeat(auto-fill, 300px);column-gap: 45px;row-gap: 20px;">
          <el-card v-for="item in list" :key="item.id" class="card">
            <el-row style="border-bottom: 1px dashed #33bea7;margin-bottom: 5px;">
              <el-col :span="20"  style="font-size: 17px;font-weight: 600;margin-bottom: 5px;">{{ item.name }}</el-col>
               <span v-if="item.type == 4 && item.staus == 0" class="theme" @click="tapBtn(item)" :span="4"><b>兑 换</b></span>
            </el-row>
            <el-row>
              <el-col :span="9">
                类型：
              </el-col>
              <el-col :span="13">
                {{ item.type == 1 ?'满减券':item.type == 3?'满赠券':'兑换券' }}
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="9">
                面值：
              </el-col>
              <el-col :span="13">
                <b style="color: #33bea7;">¥{{ item.denomination }}</b>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="9">
                使用门槛(元)：
              </el-col>
              <el-col :span="13">
               <b style="color: #33bea7"> ¥{{ item.use_threshold }}</b>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="9">
                优惠券状态：
              </el-col>
              <el-col :span="13">
                  {{ item.staus  == 0 ?'未使用':item.staus == 1?'已使用':item.staus==2?'已过期':'未开始' }}
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                有效期：
              </el-col>
              <el-col :span="18">
                {{ item.start_time.split(' ')[0] }} 至 {{ item.end_time.split(' ')[0] }}
              </el-col>
            </el-row>
            <el-row>
              <el-col>归属门店：{{ detail.shop_name }}</el-col>
            </el-row>
          </el-card>
        </div>
      </div>
      <el-empty v-else description="暂无数据" class="mr50 mt50"></el-empty>
    </div>
  </div>
</template>

<script>
import { getCouponProvide } from '@/api/client';
class Search {
  type = "";
}
class Options {
  type = [
    { id: 1, name: "满减券" },
    { id: 3, name: "满赠券" },
    { id: 4, name: "兑换券" }
  ];
}
export default {
  name: 'CardList',
   props: {
    clienId: {
      type: String,
      default: ""
    },
     detail: {
      type: Object,
      default() {
        return {};
      }
    },
  },
  data () {
    return {
      clientLoading:true,
      search: new Search(), // 检索条件
      options: new Options(), // 选项
      list: [], // 数据展示
    }
  },

  activated () {},
  mounted () {
    this.getList()
  },
  methods: {
    // 获取列表
    getList () {
      getCouponProvide({...this.search,customer_id:this.clienId}).then(res => {
        this.list = res.data;
        this.clientLoading = false;
      })
    },
    tapBtn(row){
      const query = { clienId: this.clienId, detail: this.detail,yhj_id:row.id };
      this.$router.push({ name: "兑换订单", query });
    },
  }
}
</script>

<style lang="scss" scoped>
.content{
  padding: 30px 0 50px; 
}
::v-deep .el-card__body{
  padding: 10px 20px !important;
  line-height: 25px;
}
</style>
